<template>
  <div class="hello">
    hello, G6
    <G6 :nodeData="nodeData"
        @fold="foldItem"
        @clickNode="clickNode"
        @openChart0="openChart0"
        @openChart1="openChart1"
        @openChart2="openChart2"
        @openChart3="openChart3"
    >
    </G6>
  </div>
</template>

<script>
  import G6 from "./G6";
  const INITIALTOP = 200
  const INITIALLEFT = 50
  const NODEPADDINGTOP= 150
export default {
  components: { G6 },
  data() {
    return {
      originData: [
        {
          id: 1,
          name: 'a',
          backPressureStatus: 0,
          error: false
        },
        {
          id: 2,
          name: 'b',
          backPressureStatus: 0,
          error: true
        },
        {
          id: 3,
          name: 'c',
          backPressureStatus: 0,
          error: true
        },
        {
          id: 4,
          name: 'd',
          backPressureStatus: 0,
          error: true
        }
      ],
      nodeData: {},
    }
  },
  mounted() {
    this.transFormOriginData()
  },
  methods: {
    // 处理初始化 data ，纯父节点，排列方式为一条直线
    transFormOriginData() {
      let nodeData = {}
      let edges = []
      let nodeIds = []
      this.originData.forEach((item, index) => {
        item.x = INITIALLEFT + index * 300
        item.y = INITIALTOP
        item.open = false // 是否有子节点需要根据接口进行判断
        item.isKeyNode = true
        nodeIds.push(item.id)
      })
      for (let i = 0; i < nodeIds.length - 1; i++ ) {
        edges.push({
          source: nodeIds[i] + '',
          target: nodeIds[i + 1] + ''
        })
      }
      nodeData = {
        nodes: this.originData,
        edges
      }
      console.log('nodeData', nodeData)
      this.nodeData = nodeData
    },

    foldItem(data) {
      // 缩进
      if (data.open) {
        this.shrinkNode(data)
      }
      // 展开
      else {
        this.getChildrenData(data)
      }
    },

    // 根据nodes 绘制连线
    computedEdges(currentData) {
     //转化为 [1, 2, [3, 4, 5], 6]   [3, 4, 5]为子节点
      let nodeIds = []
      let childrenNodeNewObj = {}
      for (let i = 0; i < currentData.nodes.length; i++ ) {
        if (!currentData.nodes[i].pId) {
          nodeIds.push(currentData.nodes[i].id)
        } else {
          childrenNodeNewObj[currentData.nodes[i].pId] = []
        }
      }

      for (let i = 0; i < currentData.nodes.length; i++ ) {
        if (currentData.nodes[i].pId) {
          childrenNodeNewObj[currentData.nodes[i].pId].push(currentData.nodes[i].id)
        }
      }

      for (let key in childrenNodeNewObj) {
        let keyInNode = nodeIds.findIndex(item => {
          return key == item
        })
        nodeIds.splice(keyInNode + 1, 0, childrenNodeNewObj[key])
      }
      // 连线
      let edges = []

      for (let i = 0; i < nodeIds.length; i++ ) {

        if (typeof (nodeIds[i]) === 'number' && typeof (nodeIds[i + 1]) === 'number' ) {
          edges.push({
            source: nodeIds[i] + '',
            target: nodeIds[i + 1] + ''
          })
        }

        else if (typeof (nodeIds[i]) === 'object' && typeof (nodeIds[i - 1]) === 'number' && typeof (nodeIds[i + 1]) === 'number') {
          nodeIds[i].forEach(item => {
            edges.push({
              source: item + '',
              target: nodeIds[i + 1] + ''
            })
            edges.push({
              source: nodeIds[i - 1] + '',
              target: item + ''
            })
          })
        }

        else if (typeof (nodeIds[i]) === 'object' && i === nodeIds.length - 1) {
          nodeIds[i].forEach(item => {
            edges.push({
              source: nodeIds[i - 1] + '',
              target: item + ''
            })
          })
        }
      }
      return edges
    },
    computedPid(currentData) {
      // 重新计算 pID
      for (let i = 0; i < currentData.nodes.length; i++) {
        for (let j = 0; j < currentData.nodes.length; j++) {
          if (currentData.nodes[i].pName && currentData.nodes[i].pName === currentData.nodes[j].name) {
            currentData.nodes[i].pId = currentData.nodes[j].id
          }
        }
      }
    },
    // 节点缩进
    shrinkNode(data) {
      let currentData = JSON.parse(JSON.stringify(this.nodeData))
      // 删除子节点
      currentData.nodes = currentData.nodes.filter(item => {
        return item.pId !== data.id
      })
      // 重新渲染位置 及 id
      currentData.nodes.forEach((item, index) => {
        if (item.name === data.name) {
          item.open = false
        }
        // 子节点后面的节点，x方向 - 300
        if (index >= data.id) {
          item.x = item.x - 300
        }
        // 重新计算 id 连线用
        item.id = index + 1
      })

      // 重新计算 pID
      this.computedPid(currentData)
      // 计算连线
      currentData.edges = this.computedEdges(currentData)

      this.nodeData = ''
      this.nodeData = currentData
    },
    // 节点展开
    getChildrenData(data) {
      let currentData = JSON.parse(JSON.stringify(this.nodeData))
      setTimeout(() => {
        // 获取的子节点数据  -- 测试
        let childrenData = [
          {
            name: 'wxw',
            backPressureStatus: 0,
            error: false
          },
          {
            name: 'wxw2',
            backPressureStatus: 0,
            error: true
          },
          {
            name: 'wxw3',
            backPressureStatus: 0,
            error: true
          },
          {
            name: 'wxw4',
            backPressureStatus: 0,
            error: true
          },
          {
            name: 'wxw5',
            backPressureStatus: 0,
            error: true
          }
        ]
        let middleNum
        // 长度为偶数  计算 y
        if (childrenData.length % 2 === 0) {
          middleNum = (childrenData.length - 1) / 2
        }
        // 长度为奇数  计算 y
        else {
          middleNum = parseInt(childrenData.length / 2)
        }

        childrenData.forEach((item, index) => {
          item.y = (index - middleNum) * NODEPADDINGTOP + INITIALTOP
          item.pId = data.id
          item.pName = data.name
        })

        // 子节点推进去
        currentData.nodes.splice(data.id, 0, ...childrenData)

        currentData.nodes.forEach((item, index) => {
          if (item.name === data.name) {
            item.open = true
          }
          // 增加的子节点，x方向 + 300
          if (item.pId === data.id) {
            item.x = data.x + 300
          }
          // 子节点后面的节点，x方向 + 300
          if (index >= data.id + childrenData.length) {
            item.x = item.x + 300
          }
          // 重新计算 id 连线用
          item.id = index + 1
        })

        // 重新计算 pID
        this.computedPid(currentData)
        // 计算连线
        currentData.edges = this.computedEdges(currentData)

        this.nodeData = ''
        this.nodeData = currentData

      }, 200)

    },
    clickNode(data) {
      console.log('clickNode', data)
    },
    openChart0(data) {
      console.log('openChart0', data)
    },
    openChart1(data) {
      console.log('openChart1', data)
    },
    openChart2(data) {
      console.log('openChart2', data)
    },
    openChart3(data) {
      console.log('openChart3', data)
    },
  }
}
</script>
<style scoped>
</style>
